<template>
	<div @click="changeShow">
		<div class="mineNav">
			<MineNav :navTitle="navTitle" />
		</div>
		<router-link :to="{name:'mineIndex'}">
			<img class="leftArrow" src="../../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
		<div class="personBody">
			<div class="bodyTop">
				<div class="firstDiv">
					<p>头像</p>
					<img :src="personData.headImg" alt="" />
					<img :src="rowImg" alt="" />
				</div>
				
				<div class="secondDiv">
					<router-link :to="{name:'personName'}">
						<p>昵称</p>
						<img :src="rowImg" alt="" />
						<p>{{personData.username}}</p>
					</router-link>
				</div>
				
				<div class="secondDiv">
					<p>偶粉号</p>
					<img :src="rowImg" alt="" />
					<p>{{personData.ouFen}}</p>
				</div>
				<div class="secondDiv">
					<p>手机号</p>
					<img :src="rowImg" alt="" />
					<p>{{personData.telephone}}</p>
				</div>
			</div>
			<div class="bodyTop">
				<div class="secondDiv">
					<p>性别</p>
					<img :src="rowImg" alt="" @click.stop="sexChange"/>
					<p>{{personData.sex}}</p>
				</div>
				<div class="secondDiv">
					<p>地区</p>
					<img :src="rowImg" alt="" />
					<p>{{personData.address}}</p>
				</div>
				<div class="secondDiv">
					<router-link :to="{name:'personSignature'}">
						<p class="firstP">个性签名</p>
						<img :src="rowImg" alt="" class="lastImg"/>
						<p class="lastP">{{personData.signature}}</p>
					</router-link>
				</div>
			</div>
		</div>
		 <div v-show="isShow" class='changSex'>
	    	<div>
    			<div>
	    			<img :src="girlNewImg" alt="" @click.stop="girlChange" v-if="isSex"/>
	    			<img :src="girlOldImg" alt="" @click.stop="girlChange" v-else/>
	    			<p>女神</p>
	    		</div>
	    		
	    		<div>
	    			<img :src="boyOldImg" alt="" v-if="isSex" @click.stop="boyChange"/>
	    			<img :src="boyNewImg" alt="" v-else @click.stop="boyChange"/>
	    			<p>型男</p>
	    		</div>
	    	</div>
	    	<div class="deleteClass">
	    		   <p >取消</p>
	    	</div>
	    </div>
	</div>
</template>

<script>
	import MineNav from "../../public/mineNav"
	export default {
		data(){
			return{
				navTitle:"个人资料",
				isSex:true,
				rowImg:require("../../../../assets/images/mine/47/rightRow.png"),
                personData:{
					username:"未登录",
					id:0,
					signature:"亲亲，你还没有登录哦，赶紧去登录吧",
					ouFen:0,
					telephone:0,
					address:"北京 昌平",
					sex:"男",
					headImg:require("../../../../assets/images/mine/47/denglu.gif")
				},
                isShow:false,
                girlImg:require("../../../../assets/images/mine/66/1-2.png"),
                girlNewImg:require("../../../../assets/images/mine/66/1-2.png"),
                girlOldImg:require("../../../../assets/images/mine/66/1-1.png"),
                boyNewImg:require("../../../../assets/images/mine/66/2-2.png"),
                boyOldImg:require("../../../../assets/images/mine/66/2-1.png"),
			}
		},
		components:{
			MineNav
		},
		created(){
			   var mineObj = JSON.parse(localStorage.getItem("mineData")) || 0
			   var username = localStorage.getItem("username");
			   if(mineObj){
			   	 this.personData = {
		      	    username:username,
					id:mineObj.id,
					signature:mineObj.signature,
					ouFen:mineObj.ouFen,
					telephone:mineObj.telephone,
					address:mineObj.address,
					sex:mineObj.sex,
					headImg:mineObj.headImg
			     }
			   }
			  
			this.isShow = false;
			if(mineObj.sex == "男"){
				this.isSex = false;
			}else if(mineObj.sex == "女"){
				this.isSex = true;
			}
		},
		methods:{
			changeShow(){
				this.isShow=false;
			},
			sexChange(){
				this.isShow=true
			},
			boyChange(){
				this.isSex=false;
				this.personData.sex = "男"
				this.isShow=true
				
			},
			girlChange(){
				this.isSex=true;
				this.personData.sex = "女"
				this.isShow=true
			}
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.mineNav {
		height: 88/@current;
	}
	.leftArrow {
		position: fixed;
		top: 26/@current;
		left: 40/@current;
		z-index: 333;
		width: 22/@current;
	}
	.personBody{
		width:100%;
		.bodyTop{
			margin-top:40/@current;
			width:100%;
			background:white;
			border:1/@current solid #d7d2e0;
			.firstDiv{
				width:590/@current;
				margin-left:30/@current;
				border-bottom:1/@current solid #d7d2e0;
				overflow:hidden;
				padding:20/@current 0;
				
				p{   
					float:left;
					color:#1b1b1b;
					font-size:36/@current;
					margin-left:10/@current;
					height:80/@current;
					line-height:80/@current;
				}
				img:first-of-type{
					float:left;
					width:80/@current;
					height:80/@current;
					margin-left:380/@current;
				}
				img:last-of-type{
					float:right;
					width:16/@current;
					height:30/@current;
					margin-right:10/@current;
					margin-top:25/@current;
				}
			}
			.secondDiv{
				width:590/@current;
				margin-left:30/@current;
				border-bottom:1/@current solid #d7d2e0;
				overflow:hidden;
				padding:20/@current 0;
				vertical-align: middle;
				
				p:first-of-type{   
					float:left;
					color:#1b1b1b;
					font-size:36/@current;
					margin-left:10/@current;
					
				}
				p:last-of-type{
					float:right;
					color:#707070;
					font-size:28/@current;
					margin-right:20/@current;
					margin-top:4/@current;
				}
				img{
					float:right;
					width:16/@current;
					height:28/@current;
					margin-right:10/@current;
					margin-top:10/@current;
				}
			}
			.secondDiv:last-of-type{
				border:none;
			}
		}
	}
	.bodyTop:last-of-type{
		margin-top:40/@current;
		.firstP{   
			float:left;
			color:#1b1b1b;
			font-size:36/@current;
			margin-left:10/@current;
			margin-top:10/@current;
		}
		
		.lastP{
			float:right;
			color:#707070;
			font-size:28/@current;
			margin-top:4/@current;
			width:300/@current;
			margin-left:86/@current;
			transform: translateX(20/@current);
		}
		.lastImg{
			float:right;
			width:16/@current;
			height:28/@current;
			margin-right:10/@current;
			transform: translateY(12/@current);
		}
	}
    .changSex{
    	background-color:rgba(0,0,0,.2);
    	height:360/@current;
    	width:100%;
    	position:fixed;
    	bottom:0;
    	left:0;
    	z-index:999;
    	div:nth-of-type(1){
    		width:600/@current;
    		margin-left:20/@current;
    		background:white;
    		overflow:hidden;
    		text-align:center;
    		margin-top:30/@current;
    		height:200/@current;
    		border-radius:10/@current;
    		div{
    			margin-left:0;
    			margin-top:24/@current;
    			float:left;
    			width:300/@current;
    			height:172/@current;
    			img{
	    			width:100/@current;
	    			height:100/@current;
	    		}
	    		p{
	    			font-size:30/@current;
	    			color:#434343;
	    			margin-top:-20/@current;
	    		}
    		}
    	}
    	.deleteClass{
    		width:600/@current;
    		margin-left:20/@current;
    		background:white;
    		text-align:center;
    		margin-top:12/@current;
    		height:88/@current;
    		border-radius:10/@current;
    		p{
    			height:88/@current;
    			line-height:88/@current;
    			font-size:30/@current;
    			color:#A54BE8;
    		}
    	}
   }
</style>